<template>
  <div
    class="showPanel flex flex-col gap-y-[20px] h-full animate__animated transitionPanel relative animate__fadeInRight"
  >
    <div class="relative h-full text-[#fff]">
      <div
        class="absolute flex flex-col gap-y-[20px] top-0 left-0 right-0 bottom-0 pt-[50px] pl-[10px] pb-[50px]"
      >
        <base-card
          class="overflow-hidden"
          title="产业产值比重分析"
          style="flex-basis: 33%"
        >
          <template #rightTitle>
            <a-date-picker
              picker="month"
              class="!bg-[transparent] !text-[#fcfcfc] custom-input"
              v-model:value="topTime"
              @change="getTopData"
            ></a-date-picker>
          </template>
          <base-chart :options="topOption"></base-chart>
        </base-card>
        <!--        <base-card class="flex-1 overflow-hidden" title="用工需求明细">-->
        <!--          <a-input class="custom-input" placeholder="输入唯一码搜索">-->
        <!--            &lt;!&ndash;            <template #prefix>&ndash;&gt;-->
        <!--            &lt;!&ndash;              <SearchOutlined />&ndash;&gt;-->
        <!--            &lt;!&ndash;            </template>&ndash;&gt;-->
        <!--          </a-input>-->
        <!--          <base-table-->
        <!--            :show-tool="false"-->
        <!--            :column="column"-->
        <!--            :data-source="tableData"-->
        <!--            :show-pagination="false"-->
        <!--            class="reset-table"-->
        <!--          ></base-table>-->
        <!--        </base-card>-->
        <!--        <base-card class="flex-1 overflow-hidden" title="工作经验分析">-->
        <!--          <base-chart :options="bottomOption"></base-chart>-->
        <!--        </base-card>-->
      </div>
    </div>
  </div>
</template>

<script setup>
import BaseCard from "@/components/three/component/baseCard.vue";
import BaseChart from "@/components/three/component/baseChart/index.jsx";
import { onMounted, ref, h } from "vue";
import { CommonEchartLegend } from "@/utils/index.js";
import BaseTable from "@/components/three/component/baseTable/index.jsx";
import { getJJYXightData } from "@/api/dataScreen/dataScreen.js";
import { dayjs } from "element-plus";
import { JJYXRightTop } from "@/utils/constant.js";
// import { SearchOutlined } from "@ant-design/icons-vue";
let ser_data = [
  {
    value: 10,
    name: "酒店",
  },
  {
    value: 20,
    name: "餐饮",
  },
  {
    value: 25,
    name: "民宿",
  },
  {
    value: 5,
    name: "土特产",
  },
];
const topTime = ref(dayjs());
const topData = ref([]);
const topOption = ref({
  backgroundColor: "rgba(0,0,0,0)",
  title: [],
  tooltip: {
    // show: false,
    formatter: "{b}: {c} ({d}%)",
    trigger: "item",
  },

  legend: {
    ...CommonEchartLegend,
    orient: "vertical",
    left: "5%",
  },
  series: [
    {
      label: {
        show: true,
      },
      roseType: "radius",
      type: "pie",
      center: ["50%", "50%"],
      data: [],
    },
  ],
});
const column = ref([
  {
    dataIndex: "type",
    align: "center",
    key: "type",
    label: "行业分类",
  },
  {
    dataIndex: "name",
    align: "center",
    key: "name",
    label: "企业名称",
  },
  {
    dataIndex: "number",
    align: "center",
    key: "number",
    label: "需求人数",
  },
]);

onMounted(() => {
  getTopData();
});
const getTopData = () => {
  getJJYXightData({
    yearMonth: topTime.value.format("YYYY-MM"),
  }).then((res) => {
    topData.value = res.data;
    // topData.value = JJYXRightTop;

    topOption.value.series[0].data = topData.value?.map((item) => {
      return {
        name: item.name,
        value: item.value,
      };
    });
  });
};
</script>
<style scoped lang="less">
.custom-input {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;

  &::placeholder {
    color: #fff;
    opacity: 0.6;
  }

  &:hover,
  &:focus {
    border-color: #3faa90;
    box-shadow: none;
  }

  input {
    background-color: transparent;
    color: #fff;
  }
}
</style>
